<template>
	<view class="realName">
		<view class="setImage_box">
			<view class="titl my-pdl-15">上传身份证</view>
			<view class="img_box">
				<view class="bor_deash" @click="updateimg('Front')">
					<template v-if="fontBool">
						<view class="tupian">
							<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/KQNYeVWIfI_pas.png" mode=""></image>
						</view>
						<view class="txt">拍摄身份证人像面</view>
					</template>
					<image :src="frontImg" mode="" v-else class="img"></image>
				</view>
				<view class="bor_deash" @click="updateimg('Back')">
					<template v-if="backBool">
						<view class="tupian">
							<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/KQNYeVWIfI_pas.png" mode=""></image>
						</view>
						<view class="txt">拍摄身份证国徽面</view>
					</template>
					<image :src="reverseImg" mode="" v-else class="img"></image>
				</view>
			</view>
		</view>
		<view class="ul_box my-pdlr-15">
			<view class="li">
				<view class="name">姓名</view>
				<input type="text" class="inp"  placeholder-style="color: #CCCCCC;" value="" v-model="name"
					placeholder="待自动录入" />
			</view>
			<view class="li">
				<view class="name">身份证</view>
				<input type="text" class="inp" disabled placeholder-style="color: #CCCCCC;" value="" v-model="IDCard"
					placeholder="待自动录入" />
			</view>
			<view class="li">
				<view class="name">所在地</view>
				<input type="text" class="inp" disabled placeholder-style="color: #CCCCCC;" value="" v-model="address"
					placeholder="待自动录入" />
			</view>
			<view class="li">
				<view class="name">有效期</view>
				<input type="text" class="inp" disabled placeholder-style="color: #CCCCCC;" value="" v-model="preiod"
					placeholder="待自动录入" />
			</view>
		</view>
		<view class="hezi">
			<view class="btn_box" @click="goModify">去认证</view>
		</view>
		<view class="radio-btn my-flex-col-c">
			<view class="my-flex-row-align-c">
				<radio class="tr" color="#F05329" @click="changeRadio" style="transform: scale(0.7);"  :checked="checked"/>
				<text class="my-cl-ye my-mgl-8 my-font-15" @click="goAgreement">我已阅读并同意<text class="my-cl-or">《用户协议》</text></text>
			</view>
		</view>
	</view>
</template>

<script>
	import {baseURL} from "@/utils/req.js"
	import {modfyApi ,getInfoModifyApi ,getTokenApi ,getidCardInfoApi} from '@/api/myinter.js'
	export default {
		data() {
			return {
				name: null,
				IDCard: null,
				address: null,
				preiod: null,
				access_token: null,
				frontImg:null,
				reverseImg:null,
				fontBool:true,
				backBool:true,
				id:0,
				checked:false,
			};
		},
		onLoad() {
			this.getAccessToken()
			this.getInfo()
		},
		methods: {
			goAgreement(){
				wx.navigateTo({
					url:'/pages/my/agreement'
				})
			},
			// radio切换
			changeRadio(){
				this.checked = !this.checked
			},
			async getInfo(){
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await getInfoModifyApi({})
				if(res.statusCode === 200){
					uni.hideLoading()
					if(res.data.data.idCardImageBack&&res.data.data.idCardImageFront){
						this.fontBool = false
						this.backBool = false
					}
					this.id = res.data.data.id
					this.IDCard = res.data.data.idCard
					this.address = res.data.data.idCardAddress
					this.frontImg = res.data.data.idCardImageFront
					this.reverseImg = res.data.data.idCardImageBack
					this.preiod = res.data.data.idCardTerm
					this.name = res.data.data.realName
				}
			},
			async getAccessToken() {
				uni.showLoading({
					title:'正在加载中....',
					mask:true
				})
				const res = await getTokenApi({})
				if(res.statusCode===200){
					uni.hideLoading()
					this.access_token = res.data.data.access_token
				}
			},
			async identifyIDcard(img,type) {
				let _this = this
				uni.showLoading({
					mask:true,
					title:'正在识别中....'
				})
				let params = {
					imgUrl:img,
					token:_this.access_token
				}
				const data = await getidCardInfoApi(params)
				if (data.statusCode === 200) {
					uni.hideLoading()
					if(data.data.data.type!==type){
						let txt = type==='Front'?'正面':'反面'
						wx.showToast({
							title:`请上传${txt}身份证`,
							icon:'none'
						})
						_this.fontBool = true
						_this.backBool =true
						return 
					}else{
						if(type==='Front'){
							_this.name = data.data.data.name
							_this.IDCard = data.data.data.id
							_this.address = data.data.data.addr
						}else if(type==='Back'){
							_this.preiod = data.data.data.valid_date
						}
						wx.showToast({
							title:'识别成功',
							icon:'success'
						})
					}
				} else {
					uni.hideLoading()
					wx.showToast({
						title: '识别失败，请重新扫描！'
					})
				}
			},
			updateimg(type){
				let _this = this
				wx.chooseImage({
					count: 1,// 默认9，这里显示一次选择相册的图片数量 
					sizeType: ['original '],// 可以指定是原图还是压缩图，默认二者都有 
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success (res) {
						const tempFilePaths = res.tempFilePaths 
						 wx.uploadFile({
							url: baseURL + '/user/tool/upload',
							 filePath: tempFilePaths[0],
							 name: 'file',
							 header: {
							 	'X-HXCharge-Authentication':uni.getStorageSync('sessionKey'),
							 },
							 success (res){
							    let data = JSON.parse(res.data)
								_this.identifyIDcard(data.data,type)
								if(type==='Front'){
									_this.frontImg = data.data
									_this.fontBool = false
								}else if(type==='Back'){
									_this.reverseImg = data.data
									_this.backBool = false
								}
							  }
						 })
					}
				})
			},
			async goModify(){
				if(this.frontImg===null&&this.reverseImg===null){
					uni.showToast({
						title:'请选择扫描图片',
						icon:"none"
					})
					return 
				}
				if(this.checked===false){
					uni.showToast({
						title:"请勾选用户协议",
						icon:"none"
					})
					return
				}
				let params = {
					id:this.id,
					idCard:this.IDCard,
					idCardAddress:this.address,
					idCardImageBack:this.reverseImg,
					idCardImageFront:this.frontImg,
					idCardTerm:this.preiod,
					realName:this.name
				}
				uni.showLoading({
					mask:true,
					title:'正在加载中....'
				})
				const res = await modfyApi(params)
				if(res.statusCode===200){
					uni.hideLoading()
					uni.redirectTo({
						url:'/pages/my/isSuccess?type=' + true
					})
				}else{
					uni.hideLoading()
					uni.redirectTo({
						url:'/pages/my/isSuccess?type=' + false
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.realName {
		width: 100%;
		height: 100vh;
		background: #FFFFFF;

		.setImage_box {
			width: 100%;
			height: 360rpx;

			.titl {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
			}

			.img_box {
				width: 100%;
				height: 240rpx;
				display: flex;
				align-items: center;
				justify-content: space-evenly;

				.bor_deash {
					width: 328rpx;
					height: 220rpx;
					border: 1rpx dashed #CCCCCC;
					border-radius: 10rpx;
					.img{
						width: 100%;
						height: 100%;
					}
					.tupian {
						width: 100%;
						height: 140rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 88rpx;
							height: 88rpx;
						}
					}

					.txt {
						width: 100%;
						height: 50rpx;
						text-align: center;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}

		.ul_box {
			width: 100%;
			height: 400rpx;

			.li {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #F5F5F5;

				.name {
					width: 25%;
					height: 100%;
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
					line-height: 100rpx;
				}

				.inp {
					width: 75%;
					height: 100%;
				}
			}
		}

		.hezi {
			width: 100%;
			height: 300rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn_box {
				width: 690rpx;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				background: #F05329;
				border-radius: 10rpx;
				font-size: 38rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
		.radio-btn{
			width: 100%;
			height: 80rpx;
			position: absolute;
			left: 15rpx;
			bottom: 40rpx;
		}
	}
</style>
